<script lang="ts" setup>
  import Stars from "./Stars2.vue";
  import ExternalLogins from "./ExternalLogins.vue";
  import LoginForm from "./LoginForm.vue";
  import { Device } from "@bidiao/framework";
  // import { Flexible } from "@bidiao/framework";

  const companyName = import.meta.env.VITE_COMPANY_NAME;

  const selectLanguageInfo = useFormElement();
  selectLanguageInfo.model = "cn";
  // onMounted(() => {
  //   console.log(Flexible.px2rem(420));
  // });

  function useFormElement(extendsInfo?) {
    const model = ref("");
    const isFocus = ref(false);

    function onFocusIn() {
      isFocus.value = true;
    }
    function onFocusOut() {
      isFocus.value = false;
    }

    return reactive({
      model,
      isFocus,
      onFocusIn,
      onFocusOut,
    });
  }
</script>

<template>
  <stars class="position-fixed h-100 w-100 login-bg"
         show-rain-star></stars>
  <!-- <div class="position-fixed h-100 w-100 pe-none login-bg"></div> -->
  <div class="py-5 d-flex align-items-center justify-content-center border-box min-vh-100">
    <section class="flex-shrink-0 position-relative rounded-3 p-5 pb-3 border-box shadow login-panel">
      <div class="position-absolute lh-1 toolbar-scans">
        <button class="toolbar--item"
                type="button">
          <i class="icon cms cms-scan-face"></i>
        </button>
        <button class="toolbar--item"
                type="button">
          <i class="icon cms cms-qrcode"></i>
        </button>
      </div>
      <div class="login-logo">
        <img class="login-logo--img rounded"
             src="/assets/logo2.png"
             :title="companyName" />
      </div>
      <h2 class="d-flex align-items-center my-0">
        <span>登录</span>
        <label class="ms-auto d-flex align-items-center rounded-1 py-1 px-2 select-language"
               :class="selectLanguageInfo.isFocus ? 'is-focus' : ''">
          <i class="bi bi-translate"></i>
          <select class="px-1"
                  title="切换语言"
                  @blur="selectLanguageInfo.onFocusOut"
                  @focus="selectLanguageInfo.onFocusIn"
                  v-model="selectLanguageInfo.model">
            <option value="cn">中文</option>
            <option value="en">English</option>
          </select>
          <i class="bi bi-caret-down-fill"></i>
        </label>
      </h2>
      <div class="mb-2">
        <i class="bi bi-signpost-split-fill me-1 d-inline-block text-secondary"></i>
        <router-link class="text-decoration-none"
                     title="注册帐号"
                     to="/register">注册帐号</router-link>
        <span class="mx-1">|</span>
        <router-link class="text-decoration-none"
                     title="注册帐号"
                     to="/forget">忘记密码</router-link>
      </div>
      <login-form class="mb-4"></login-form>
      <external-logins class="mb-3"></external-logins>
      <div class="text-center">
        <powered-info></powered-info>
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
  .login-bg {
    // --login-bg-image: url(/assets/login-bg-2.jpg);
    --login-bg-image: linear-gradient(to bottom, rgba(102, 125, 182, 0.8), rgba(0, 130, 200, 0.8), rgba(0, 130, 200, 0.8), rgba(102, 125, 182, 0.8));
    // background-image: linear-gradient(to bottom, #667db6, #0082c8, #0082c8, #667db6), url(/assets/login-bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-image: var(--login-bg-image);
    // background-image: linear-gradient(to bottom, rgba(102, 125, 182, 0.8), rgba(0, 130, 200, 0.8), rgba(0, 130, 200, 0.8), rgba(102, 125, 182, 0.8)),
    //   var(--login-bg-image);
  }
  .login-panel {
    background-color: var(--theme-white);
    width: 420px;
  }

  .login-logo {
    > .login-logo--img {
      font-size: 48px;
      width: 1em;
      height: 1em;
    }
  }
  .toolbar-scans {
    right: 10px;
    top: 10px;

    > .toolbar--item {
      margin-left: 5px;
      padding: 5px;
    }
    .icon {
      font-size: 22px;
    }
  }

  .select-language {
    outline-offset: 10px;
    outline: 5px solid transparent;
    background-color: var(--theme-gray-200);
    font-size: 14px;
    transition: all 0.2s ease-in-out;

    > select {
      background-color: transparent;
      border: none;
      outline: none;
      appearance: none;

      > option {
        background-color: var(--theme-white);
      }
    }

    &.is-focus {
      outline-offset: 0;
      outline-color: rgba(var(--theme-primary-rgb), 0.4);
    }
  }
</style>

<style lang="scss" scoped>
  @media (prefers-color-scheme: dark) {
    .login-panel {
      background-color: var(--theme-gray-900);
    }

    .select-language {
      background-color: var(--theme-gray-800);

      > select {
        color: var(--theme-white);

        > option {
          background-color: var(--theme-gray-800);
        }
      }
    }
  }
</style>
